<template>
  <div style="display: flex;"  :style="{ margin: '24px 16px', padding: '24px' ,backgroundColor:'#FFF' }">
    <a-table size="small" :columns="columnsRole" :data-source="roles" :pagination="false" bordered :loading="isloadingRole"
             rowKey="roleId" style="flex: 1;margin-right: 10px">
      <template slot="action" slot-scope="row">
        <a-space>
          <a @click="onExpand(row)">查看API</a>
        </a-space>
      </template>
    </a-table>
    <div style="flex: 1">
      <span class="ant-tag ant-tag-has-color" :class="tipTxt==='请选择要查看API的角色'?'noSelect':'select'">
        {{tipTxt}}
      </span>
      <a-table size="small" :row-selection="rowSelection":columns="columnsAPI" :data-source="APIs" :pagination="false" bordered
                rowKey="backendApiId" :loading="isloadingAPI">
      </a-table>
      <div style="display: flex;justify-content: center;margin-top: 20px ">
        <a-button type="primary" @click="onSubmit">保存修改</a-button>
      </div>
    </div>
  </div>
</template>

<script>
const columnsRole = [
  {title: '角色Id', dataIndex: 'roleId', key: 'roleId',ellipsis: true,},
  {title: '角色名', dataIndex: 'roleName', key: 'roleName'},
  {title: '角色描述', dataIndex: 'description', key: 'description'},
  {title: '操作', key: 'action', scopedSlots: {customRender: 'action'}}
];
const columnsAPI = [
  {title: 'ID', dataIndex: 'backendApiId', key: 'backendApiId',ellipsis: true,},
  {title: '名称', dataIndex: 'backendApiName', key: 'backendApiName'},
  {title: '请求URL', dataIndex: 'backendApiUrl', key: 'backendApiUrl'},
  {title: '描述', dataIndex: 'description', key: 'description'},

];



export default {
  name: 'Role_api',
  data() {
    return {
      isloadingRole:true,
      isloadingAPI:true,
      tipTxt:'请选择要查看API的角色',
      APIs: [],//所有管理员数据
      selectRole:{},//选中的admin
      roles: [],//所有角色数据
      selectAPIId: [],//选中的admin 拥有的角色
      columnsRole,
      columnsAPI
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys:this.selectAPIId,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectAPIId=selectedRowKeys

        }
      };
    },
  },
  mounted() {
    this.getAllAPI()
    this.getAllRole()
  },
  methods: {
    getAllAPI() {
      this.$axios({
        method: 'get',
        url: 'roleBackendApi/getAPIAll'
      }).then(res => {
        this.APIs = res.data.data
        this.isloadingAPI=false
      })
    },
    getAllRole() {
      this.$axios({
        method: 'get',
        url: 'roleBackendApi/getRoleAll'
      }).then(res => {
        this.roles = res.data.data
        this.isloadingRole=false
      })
    },
    onExpand (record) {
      this.$axios({
        method: 'get',
        url: 'roleBackendApi/getSelectApiId?roleId=' + record.roleId,
      }).then(res => {
        this.selectAPIId = res.data.data
        this.selectRole=record
        this.tipTxt='正在修改 {'+ record.roleId+'  '+record.roleName+'} 的API'

      })
    },
    onSubmit(){
      this.$axios({
        method: 'get',
        url: 'roleBackendApi/addRoleOfApi?backendApis=' + this.selectAPIId.toString()+'&roleId='+this.selectRole.roleId,
      }).then(res => {
        if (res.data.code === "200") {
          this.$message.success('保存成功');
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error('保存失败');
        }
      })

    }
  }
}
</script>

<style scoped>
.noSelect{
  background-color: #f50;
  width: 100%;
  font-size: 24px;
  margin-bottom: 10px;
  padding: 5px;
}
.select{
  background-color: #108ee9;
  width: 100%;
  font-size: 24px;
  margin-bottom: 10px;
  padding: 5px;
}
</style>
